
<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="current">
      <ion-icon [src]="'assets/icon/category-pet.svg'"></ion-icon>
      <ion-label>Active Pet Stats</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="gear">
      <ion-icon [src]="'assets/icon/category-gear.svg'"></ion-icon>
      <ion-label>Active Pet Gear</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="all">
      <ion-icon [src]="'assets/icon/category-allpets.svg'"></ion-icon>
      <ion-label>All Pets</ion-label>

      <!-- tabs must request data like this or it doesn't work -->
      <ng-container *ngIf="(gameService.player$ | async) as player">
        <ion-badge *ngIf="uiService.hasBuyablePets(player)" color="secondary">
          {{ (player.$petsData.buyablePets | keyvalue).length }}
        </ion-badge>

        <ion-badge *ngIf="!uiService.hasBuyablePets(player) && uiService.canAnyPetGather(player)" color="success">
          Gather
        </ion-badge>
      </ng-container>

    </ion-tab-button>

    <ion-tab-button tab="adventures">
      <ion-icon [src]="'assets/icon/category-adventures.svg'"></ion-icon>
      <ion-label>Adventures</ion-label>

      <ng-container *ngIf="(gameService.player$ | async) as player">
        <ion-badge color="success" *ngIf="player.$petsData && uiService.isAnyAdventureComplete(player.$petsData.adventures)">Complete</ion-badge>
      </ng-container>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>
